var workProcedureSetting = function () {
  var template = /* html */ `
    <div class="work-procedure-setting" v-loading.fullscreen.lock="loading">
      <div>
        <el-button type="primary" size="medium" @click="addProcedure">添加工序</el-button>
        <el-button type="primary" size="medium" @click="ensure">确定</el-button>
      </div>
      <div style="margin-top:10px;" class="work-procedure-title clearfix">
        <div style="width:160px">加工工序</div>
        <div style="width:160px">最大加工时间(秒)</div>
      </div>
      <div style="margin-top:10px;">
        <div v-for="(procedure,index) in procedureList" :key="procedure.id" class="work-procedure-item">
          <el-select filterable v-model="procedure.processId" class="procedure-select" size="medium" placeholder="加工工序">
            <el-option v-for="process in processList" :key="process.id" :value="process.id" :label="process.name">
            </el-option>
          </el-select>
          <el-input-number v-model="procedure.maxProcessTime" controls-position="right" class="procedure-time" :precision="0" :step="5"
            :min="0" size="medium" :after-change-format-value="requiredInput" placeholder="最大加工时间"></el-input-number>
            <span style="margin-left:5px">
              <el-button class="delete-btn" type="text" icon="el-icon-delete" title="删除" @click="delProcedure(index)"></el-button>
            </span>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      equipment: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
        loading: false,
        procedureList: this.getProcedureList(),
        processList: this.dropdownOption.processList
      };
    },

    methods: {
      getProcedureList: function () {
        var procedureList = this.equipment.procedureList;
        if (procedureList.length === 0) {
          return [];
        }
        procedureList = _.map(procedureList, function (procedure) {
          return {
            id: SysUtil.getId(),
            maxProcessTime: procedure.maxProcessTime,
            processId: procedure.processId
          };
        });
        return procedureList;
      },

      addProcedure: function () {
        var procedureList = this.procedureList;
        if (procedureList.length !== 0) {
          var lastProcedure = procedureList[procedureList.length - 1];
          if (lastProcedure.processId === '') {
            this.$alert('请选择加工工序', '信息');
            return;
          }
        }
        procedureList.push({
          id: SysUtil.getId(),
          maxProcessTime: 100,
          processId: ''
        });
      },

      delProcedure: function (index) {
        var procedureList = this.procedureList;
        procedureList.splice(index, 1);
      },

      requiredInput: function (value) {
        return value !== undefined;
      },

      ensure: function () {
        var procedureList = this.procedureList;
        var procedures = [];
        for (var i = 0; i < procedureList.length; i++) {
          var procedure = procedureList[i];
          var processId = procedure.processId;
          if (processId === '') {
            this.$alert('请选择加工工序','信息');
            return;
          }
          procedures.push({
            maxProcessTime: procedure.maxProcessTime,
            processId: processId
          });
        }
        procedures = _.uniqBy(procedures, 'processId');
        if (procedures.length !== procedureList.length) {
          this.$alert('选择的加工工序有重复', '信息');
          return;
        }

        this.equipment.procedureList = procedures;
        this.$emit('ensure', procedureList);
        this.$emit('close');
      }
    },

    template: template
  };
}();